<template>
	<view>
		<uni-swipe-action class="topBox" v-if="article.length!=0" v-for="(item,index) in article " :key="index">
			<uni-swipe-action-item  :options="options" @change="changeSwiper" @click='clickSwiper(item)'>
				<view class='cs-file-swiper-item' style="padding: 0">
					<uni-list>
						<uni-list-item @click.native="articleDes(item)" :ellipsis="2" :border="true" :title="item.title" :note="item.nicheng?item.nicheng+'\xa0\xa0\xa0\xa0\xa0\xa0\xa0'+item.creat_time:'未设置昵称'+'\xa0\xa0\xa0\xa0\xa0\xa0\xa0'+item.creat_time" />
					</uni-list>
					<image class="img" :src="item.img_url" mode="aspectFill" v-if="item.img_url&&item.type == 1"></image>
					<image class="img" :src="item.imgList[0]" mode="aspectFill" v-if="!item.img_url && item.imgList && item.imgList.length > 0&&item.type == 1"></image>
					<image class="img" :src="item.fowImgUrl" mode="aspectFill" v-if="item.type == 2&&item.fowImgUrl"></image>
					<image class="img" :src="item.videoImage_url" mode="aspectFill" v-if="item.type == 2&&item.videoImage_url"></image>
					<image class="img" :src="item.videoImage_url" mode="aspectFill" v-if="item.type == 1&&item.videoImage_url"></image>
				</view>
			</uni-swipe-action-item>
		</uni-swipe-action>
	</view>
</template>

<script>
	import uniList from '@/components/uni-list/uni-list.vue'
	import {getLeftTime} from '@/common/util'
	import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
	export default {
		components:{
			uniList,
			uniListItem
		},
		data() {
			return {
				options: [{
					text: '删除',
					style: {backgroundColor: '#FF7171'}
				}],
				article:[],		//文章列表
				page:1,
				pagesize:8
			};
		},
		onLoad() {
			this.articleList()
		},
		// 下拉刷新
		onPullDownRefresh(){
			console.log('顶部')
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			this.page++
			this.articleList()
		},
		methods: {
			/* 学期&时段滑动点击事件 */
			changeSwiper(){
				console.log('标签滑动了')
			},
			/* 点击删除列表 */
			clickSwiper(item) {
				console.log('删除文章的ID',item.article_id)
				let resData = {
					article_id:item.article_id,
					collection_type:2
				}
				uni.showLoading({
					title:'请稍后',
					mask:true
				})
				this.$api.apiPost('user/article.lists/articleCollection',resData).then(res => {
					const data = res.data
					console.log('data',data)
					if(data.code == 200){
						uni.hideLoading()
						this.article = data.data.data
						uni.showToast({
							title:'删除成功'
						})
						this.article = []
						this.articleList()
					}
				})
			},
			/* 文章收藏列表 */
			articleList(){
				let resData = {
					page:this.page,
					pagesize:this.pagesize
				}
				this.$api.apiPost('user/article.lists/articleCollectionList',resData).then(res => {
					const DATA = res.data
					if(DATA.code == 200){
						for (var i = 0; i < DATA.data.data.length; i++) {
							/* 时间转换yyyy-MM-dd */
							DATA.data.data[i].creat_time = getLeftTime(DATA.data.data[i].creat_time)
							this.article.push(DATA.data.data[i])
						}
						console.log('文章收藏列表',this.article)
						for (var i = 0; i < this.article.length; i++) {
							if (this.article[i].subhead_content&&this.article[i].type ==2){
								let url = null
								if(this.article[i].subhead_content.indexOf('.jpg')!=-1){
									url = this.article[i].subhead_content.replace(/&amp;/g,'&').replace(/&lt;/g,'<').replace(/&gt;/g,'>').replace(/&quot;/g,'"').replace(/.*<img src="/g,'').replace(/".*/g,'')
								}
								if(this.article[i].subhead_content.indexOf('.jpg')==-1&&this.article[i].subhead_content.indexOf('.mp4')!=-1){
									url = this.article[i].subhead_content.replace(/&amp;/g,'&').replace(/&lt;/g,'<').replace(/&gt;/g,'>').replace(/&quot;/g,'"').replace(/.*src="/g,'').replace(/".*/g,'')
								}
								/* 单单取出富文本src里的路径 */
								/* this.list[i].subhead_content = this.list[i].subhead_content.replace(/&amp;/g,'&').replace(/&lt;/g,'<').replace(/&gt;/g,'>').replace(/&quot;/g,'"').replace(/<.*src=\"/g,'').replace(/\".*>/g,'') */
								console.log('url',url);
								if (url.indexOf('.jpg') != -1){
									this.article[i].fowImgUrl = url
								}else if(url.indexOf('.mp4') != -1){
									let num =Math.round(Math.random() * 3);		//随机生成背景图索引
									this.article[i].videoImage_url = this.artBgs[num];
								}
								this.article[i].subhead_content = this.article[i].subhead_content.replace(/&amp;/g,'&').replace(/&lt;/g,'<').replace(/&gt;/g,'>').replace(/&quot;/g,'"').replace(/<video.*video>/g,'').replace(/<img.*">/g,'')
							}
							if(this.article[i].content&&this.article[i].type == 1){
								let url2 = this.article[i].content
								if(url2.indexOf('.mp4') != -1&&url2.indexOf('.jpg') == -1){
									let num =Math.round(Math.random() * 3);		//随机生成背景图索引
									this.article[i].videoImage_url = this.artBgs[num];
								}
							}
						}
					}
				})
			},
			/* 文章详情 */
			articleDes(item){
				console.log(item.article_id);
				uni.navigateTo({
					url: '/pages/articleModule/newarticle-detail?stateType=0&addType=9&article_id='+item.article_id+'&top=1&admin_user_id=""'
				});
			}
		}
	};
</script>

<style scoped>
	image{
		border-radius: 10rpx;
	}
	
	/deep/ .uni-list-item__content-title{
		color: #000000;
		font-size: 32rpx;
		text-align: left;
		font-weight: bold;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2; // 行数
		word-break: break-word;
		line-height: 42rpx;
		max-height: 84rpx;
	}
	/deep/ .uni-list-item__content-note{
		color: #C0C4CC;
		font-size: 24rpx;
		text-align: left;
		font-weight: bold;
	}
	/deep/ .uni-list-item__content-note{
		margin-top: 38rpx;
		
	}
	/deep/ .uni-list-item__container{
		padding: 0;
		height: 170rpx;
	}
	.img{
		width: 300rpx;
		height: 170rpx;
	}
	.bar{
		padding: 0;
	}
	.topBox{
		/* height: 292rpx; */
		border-bottom: 2rpx solid #DCDFE6;
		padding: 60rpx 30rpx;
	}
	.slot-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
	}
	
	.slot-image {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		margin-right: 10px;
		width: 30px;
		height: 30px;
	}
	
	.cs-file-swiper-item{
		display: flex;
		padding: 14upx 30upx;
		justify-content: space-between;
		align-items: center;
		border-radius: 16upx;
		background: #FFFFFF;
		-webkit-flex: 1;
		flex: 1;
	}
</style>